<template>
	<view class="message">
		<!-- 消息通知 -->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">消息通知</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<view class="w-750 b-box d-flex flex-c ali-i-c just-s" style="padding: 0 20rpx;">
				<!-- messageCards -->
				<block>
					<view
						class=" b-box bg-fa d-flex flex-c ali-i-c just-s"
						v-for="(item, index) of messageList"
						:key="index"
						@click="toshow(item)"
						style="height: 276rpx;width: 710rpx;"
					>
						<!-- date -->
						<view
							class=" b-box d-flex flex-r ali-i-c just-c bg-fa"
							style="height: 82rpx;;width: 710rpx;"
						>
							<text class="pf-sc fw-400 " style="font-size: 24rpx;color: #999999;">
								{{ item.createtime }}
							</text>
						</view>
						<!-- card -->
						<view
							class="bg-ff  d-flex flex-c ali-i-s just-s b-box"
							style="height: 194rpx;padding: 32rpx;;width: 710rpx;border-radius: 16rpx;"
						>
							<view class="d-flex flex-r ali-i-c just-s" style="margin-bottom: 12rpx;">
								<u-badge
									:show="item.isdone == 0"
									:isDot="true"
									bgColor="#BF404C"
									:customStyle="{ marginRight: '12rpx' }"
								></u-badge>
								<text class="pf-sc fw-500 text-ep-1" style="font-size: 30rpx;color: #000000;">
									{{ item.title }}
								</text>
							</view>
							<text class="pf-sc fw-400 text-ep-2" style="font-size: 26rpx;color: #666666;">
								{{ item.content }}
							</text>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
import uBadge from '../components/uview-ui/components/u-badge/u-badge';
import uNavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import { newslist, newsdetail } from '@/common/api.js';
export default {
	components: {
		'u-navbar': uNavbar,
		'u-badge': uBadge
	},
	data() {
		return {
			containerHeight: '',
			messageList: [],
			page: 1,
			detailsId: ''
		};
	},
	onLoad(Source) {
		this.containerHeight = _containerHeight();
		this.getnewslist();
	},

	methods: {
		getnewslist() {
			newslist({
				token: uni.getStorageSync('usertoken'),
				page: this.page
			})
				.then(res => {
					if (res.data.code === 1) {
						this.messageList = res.data.data;
					}
				})
				.catch(err => {});
		},

		toshow(item) {
			this.detailsId = item.id;
			uni.showModal({
				title: item.title,
				content: item.content,
				showCancel: false,
				success: res => {
					if (res.confirm) {
						item.isdone = 1;
					}
				}
			});
		},
		getDetails() {
			newsdetail({
				token: uni.getStorageSync('usertoken'),
				id: this.detailsId
			})
				.then(res => {
					if (res.data.code === 1) {
						console.log(res,'res');
					}
				})
				.catch(err => {});
		}
	},
	onReachBottom() {
		let page = this.page++;
		let params = {
			token: uni.getStorageSync('usertoken'),
			page: page
		};
		newslist(params).then(res => {
			if (res.data.data.length > 0) {
				this.messageList.push(...res.data.data);
			}
		});
	}
};
</script>

<style lang="scss">
.message {
}
</style>
